<template>
  <div>
    <n-form
        ref="formRef"
        inline
        :label-width="80"
        :rules="rules"
        :model = "storyPaintConfig"
    >
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="24" :show-label="false">
          <n-button type="info" block @click="programmeShow = true"   >点击从方案库选取方案</n-button>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="图片尺寸" path="ar">
          <n-radio-group v-model:value="storyPaintConfig.ar" size="large">
            <n-radio-button
                v-for="size in options.sizeOption"
                :key="size.value"
                :value="size.value"
                :label="size.label"
            />
          </n-radio-group>
        </n-form-item-gi>

        <n-form-item-gi :span="12" label="机器人选择" path="model">
          <n-radio-group v-model:value="storyPaintConfig.botType" size="large">
            <n-radio-button
                v-for="model in options.botTypeOption"
                :key="model.value"
                :value="model.value"
                :label="model.label"
            />
          </n-radio-group>
        </n-form-item-gi>

        <n-form-item-gi :span="12" label="模型选择" path="model">
          <n-radio-group v-model:value="storyPaintConfig.model" size="large">
            <n-radio-button
                v-for="model in options.mjModelOption"
                :key="model.value"
                :value="model.value"
                :label="model.label"
            />
          </n-radio-group>
        </n-form-item-gi>

        <n-form-item-gi :span="12" label="">
          <n-radio-group v-model:value="storyPaintConfig.model" name="size" size="large">
            <n-radio-button
                v-for="size in options.nijiModelOption"
                :key="size.value"
                :value="size.value"
                :label="size.label"
            />
          </n-radio-group>
        </n-form-item-gi>

        <n-form-item-gi label="品质" :span="12" path="quality">
          <n-select
              :options="qualityOption"
              v-model:value="storyPaintConfig.quality">
          </n-select>
        </n-form-item-gi>

        <n-form-item-gi :span="12" label="出图模式">
          <n-select
              v-model:value="storyPaintConfig.plotMode"
              :options="options.plotMode">
          </n-select>
        </n-form-item-gi>

        <n-form-item-gi :span="12" label="允许垫图和人物参考">
          <n-select
            :options="options.enableReferencePicOption"
            v-model:value="storyPaintConfig.enableReferencePic">
          </n-select>
        </n-form-item-gi>

        <n-form-item-gi :span="12" label="混乱度">
          <n-input-number  style="width: 100%" v-model:value="storyPaintConfig.chaos" :step="1" :min="0" :max="100"></n-input-number>
         </n-form-item-gi>

        <n-form-item-gi :span="8" label="图像参考">
          <n-input-number
              style="width: 100%"
              v-model:value="storyPaintConfig.iw"
              :min="0"
              :max="2"
              :step="0.1"
          ></n-input-number>
        </n-form-item-gi>


        <n-form-item-gi :span="8" label="人物参考">
          <n-input-number
              style="width: 100%"
              v-model:value="storyPaintConfig.crefValue"
              :min="0"
              :max="100"
            ></n-input-number>
        </n-form-item-gi>

        <n-form-item-gi :span="8" label="风格参考">
          <n-input-number
              style="width: 100%"
              v-model:value="storyPaintConfig.srefValue"
              :min="0"
              :max="1000"
          ></n-input-number>
        </n-form-item-gi>


        <n-form-item-gi label="风格参考图片,允许上传三张" :span="24" v-if="storyPaintConfig.srefValue > 0">
          <n-grid x-gap="10">
            <n-grid-item :span="8">
              <n-space justify="center">
                <n-empty description="还未填写图片路径" v-if="storyPaintConfig.srefImage1Url?.length == 0 ">
                  <template #extra>
                  </template>
                </n-empty>

                <n-image
                  v-else
                  :width="150"
                  :object-fit="'cover'"
                  :src="storyPaintConfig.srefImage1Url">
                </n-image>
              </n-space>
              <n-input
                v-model:value="storyPaintConfig.srefImage1Url">
              </n-input>
            </n-grid-item>
            <n-grid-item :span="8">
              <n-space justify="center">
                <n-empty description="还未填写图片路径" v-if="storyPaintConfig.srefImage2Url?.length == 0 ">
                  <template #extra>
                  </template>
                </n-empty>

                <n-image
                  v-else
                  :width="150"
                  :object-fit="'cover'"
                  :src="storyPaintConfig.srefImage2Url">
                </n-image>
              </n-space>
              <n-input
                v-model:value="storyPaintConfig.srefImage2Url">
              </n-input>
            </n-grid-item>
            <n-grid-item :span="8">
              <n-space justify="center">
                <n-empty description="还未填写图片路径" v-if="storyPaintConfig.srefImage3Url?.length == 0 ">
                  <template #extra>
                  </template>
                </n-empty>

                <n-image
                  v-else
                  :width="150"
                  :object-fit="'cover'"
                  :src="storyPaintConfig.srefImage3Url">
                </n-image>
              </n-space>
              <n-input
                v-model:value="storyPaintConfig.srefImage3Url">
              </n-input>
            </n-grid-item>
          </n-grid>
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="前置参数">
          <n-input
              v-model:value="storyPaintConfig.prompt"
              type="textarea"
              style="height: 60px">
          </n-input>
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="不想出现的元素">
          <n-input
              v-model:value="storyPaintConfig.no"
              type="textarea"
              style="height:60px">
          </n-input>
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="后置参数">
          <n-input type="textarea" v-model:value="storyPaintConfig.command">
          </n-input>
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <n-drawer v-model:show="programmeShow" style="width: 1200px">
      <n-drawer-content title="MJ原创方案选择" closable>
        <ProgrammeSetting engineType="MJ" programmeType="NOVEL" :choseConfig="choseProgrammeConfig"></ProgrammeSetting>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import ProgrammeSetting from "@/components/creator/boardConfig/programmeSetting.vue";

const programmeShow = ref(false)
const formRef = ref(null)
const options = {
  sizeOption: [{
    label: '1:1',
    value: '1:1'
  }, {
    label: '4:3',
    value: '4:3'
  }, {
    label: '16:9',
    value: '16:9'
  }, {
    label: '3:4',
    value: '3:4'
  }, {
    label: '9:16',
    value: '9:16'
  }],

  mjModelOption: [{
    label: 'MJ v6.0',
    value: 'MJv6'
  }, {
    label: 'MJ v5.1',
    value: 'MJv5.1'
  }, {
    label: 'MJ v5.2',
    value: 'MJv5.2'
  }, {
    label: 'MJ v5.0',
    value: 'MJv5'
  }],
  nijiModelOption: [
    {
      label: 'NJ v6.0',
      value: 'NIJIv6'
    }, {
      label: 'NJ v5.0',
      value: 'NIJIv5'
    }, {
      label: 'NJ v4.0',
      value: 'NIJIv4'
    }
  ],
  qualityOption: [
    {
      label: '高清',
    }
  ],
  plotMode: [
    {
      label: '慢速',
      value: '1'
    }, {
      label: '快速',
      value: '2'
    }, {
      label: '涡轮',
      value: '3'
    }
  ],
  botTypeOption: [{
    label: 'MJ机器人',
    value: 'mjbot'
  }, {
    label: 'NIJI机器人',
    value: 'nijibot'
  }],
  enableReferencePicOption: [{
    label: '是',
    value: true
  }, {
    label: '否',
    value: false
  }]
}

const qualityOption = [
  {
    label: '高',
    value: 'high'
  }, {
    label: '中',
    value: 'hormal'
  }, {
    label: '低',
    value: 'low'
  }
]


const rules = {
  ar: {
    required: true,
    message: '请选择尺寸信息'
  },
  model: {
    required: true,
    message: '请选择模型'
  }
};


const storyPaintConfig = ref({
      ar: '4:3',
      model: 'MJv6',
      quality: 'high',
      chaos: 0,
      base64: '',
      prompt: '',
      no: '',
      plotMode: '2',
      command: '',
      resourceId: '',
      enableReferencePic: true,
      botType: 'mjbot',
      crefValue: 60,
      srefValue: 100,
      srefImage1Url: '',
      srefImage2Url: '',
      srefImage3Url: '',
      iw: 0.5
    }
)

const validateForm = (fr: any) => {
  return new Promise((resolve) => {
    fr.value?.validate((errors) => {
      if (!errors) {
        resolve(true)
      } else {
        resolve(false)
      }
    });
  });
}



const loadConfig = async (paintConfig: string) => {
  // console.log(paintCon/fig)
  if (paintConfig != null && paintConfig.length > 0) {
    // 加载配置数据
    const config = JSON.parse(paintConfig)
    storyPaintConfig.value.ar = config.ar
    storyPaintConfig.value.quality = config.quality
    storyPaintConfig.value.chaos = config.chaos
    storyPaintConfig.value.no = config.no
    storyPaintConfig.value.model = config.model
    storyPaintConfig.value.plotMode = config.plotMode
    storyPaintConfig.value.command = config.command
    storyPaintConfig.value.resourceId = config.resourceId
    storyPaintConfig.value.enableReferencePic = config.enableReferencePic
    storyPaintConfig.value.botType = config.botType
    storyPaintConfig.value.crefValue = config.crefValue
    storyPaintConfig.value.srefValue = config.srefValue
    storyPaintConfig.value.srefImage1Url = config.srefImage1Url
    storyPaintConfig.value.srefImage3Url = config.srefImage3Url
    storyPaintConfig.value.srefImage2Url = config.srefImage2Url
    storyPaintConfig.value.iw = config.iw
    storyPaintConfig.value.prompt = config.prompt
  }
}

const getConfig = async () => {
  const results = await Promise.all([
    validateForm(formRef)
  ]);
  const allValid = results.every((valid) => valid);
  if (allValid) {
    return storyPaintConfig.value;
  }
}


defineExpose({
  getConfig, loadConfig
})

const choseProgrammeConfig = (programmeConfig:string) =>{
  const config = JSON.parse(programmeConfig)

  storyPaintConfig.value.ar = config.ar
  storyPaintConfig.value.model = config.model
  storyPaintConfig.value.quality = config.quality
  storyPaintConfig.value.chaos = config.chaos
  storyPaintConfig.value.no = config.no
  storyPaintConfig.value.plotMode = config.plotMode
  storyPaintConfig.value.command = config.command
  storyPaintConfig.value.resourceId = config.resourceId
  storyPaintConfig.value.enableReferencePic = config.enableReferencePic
  storyPaintConfig.value.botType = config.botType
  storyPaintConfig.value.crefValue = config.crefValue
  storyPaintConfig.value.srefValue = config.srefValue
  storyPaintConfig.value.srefImage1Url = config.srefImage1Url
  storyPaintConfig.value.srefImage3Url = config.srefImage3Url
  storyPaintConfig.value.srefImage2Url = config.srefImage2Url
  storyPaintConfig.value.iw = config.iw
  programmeShow.value = false
  window.$message.success("加载配置成功！")

}
</script>

